<!-- 抽屉组件 -->
<template>
  <div class="drawer">
    <div
      class="visibleBut"
      :class="visible ? 'visibleButHide' : 'visibleButShow'"
      @click="visible = !visible"
    >
      <icon-caret-left v-if="visible" />
      <icon-caret-right v-else />
    </div>
    <div class="drawer-body" :style="{ width: visible ? width : '0px' }">
      <div
        :style="{
          width: width,
          padding: padding + 'px',
          height: '100%',
          overflowX: 'hidden'
        }"
      >
        <slot />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
const props = withDefaults(
  defineProps<{
    width?: string;
    defineVisible?: boolean;
    padding?: number | string;
  }>(),
  {
    width: '14.63542rem',
    defineVisible: true,
    padding: '0'
  }
);
console.log(12345);

const visible = ref(props.defineVisible);

defineExpose({ visible });
</script>

<style scoped lang="less">
.drawer {
  position: relative;
  height: 100%;
}
.drawer-body {
  overflow: hidden;
  transition-property: width;
  transition-duration: 0.3s;
  height: 100%;
  background: rgb(255, 255, 255);
  border-right: 1px var(--color-fill-3) solid;
}
.visibleBut {
  background: rgb(255, 255, 255);
  color: #000;
  position: absolute;
  top: 50%;
  transform: translatey(-30px);
  width: 14px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  font-size: 12px;
  background: var(--color-neutral-2);
}
.visibleButHide {
  right: 0px;
  border-radius: 5px 0 0 5px;
}
.visibleButShow {
  right: -14px;
  border-radius: 0 5px 5px 0;
}
</style>
